<template>
  <div className="chart-box">
    <div id="chart-3" style="min-width: 580px; height: 350px"></div>
  </div>
</template>

<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入饼状图组件
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

export default {
  created() {
    this.initData();
  },
  mounted() {
    this.drawChart();
  },
  computed: {
    myChart() {
      return echarts.init(document.getElementById("chart-3"));
    },
  },
  methods: {
    count_kind(data) {
      console.log(data);
      let computer = 0; //计算机
      let economy = 0; //金融
      let orgnize = 0; //管理
      let study = 0; //科学研究
      let build = 0; //制造业
      let electric = 0; //电力
      let educate = 0; //教育
      let health = 0; //卫生
      let transport = 0; //交通运输
      let service = 0; //服务
      let building = 0; //房地产
      let culture = 0; //文化
      let army = 0; //军队
      let sum = 0;
      for (let i in data) {
        let cur = data[i]["term"];
        let num = data[i]["num"];
        if (cur == "信息传输、软件和信息技术服务业") {
          computer += num;
        } else if (cur == "交通运输、仓储和邮政业") {
          transport += num;
        } else if (cur == "金融业") {
          economy += num;
        } else if (cur == "部队") {
          army += num;
        } else if (cur == "公共管理、社会保障和社会组织") {
          orgnize += num;
        } else if (cur == "电力、热力、燃气及水生产和供应业") {
          electric += num;
        } else if (cur == "制造业") {
          build += num;
        } else if (cur == "教育") {
          educate += num;
        } else if (cur == "科学研究和技术服务业") {
          study += num;
        } else if (cur == "批发和零售业") {
        } else if (cur == "房地产业") {
          building += num;
        } else if (cur == "文化、体育和娱乐业") {
          culture += num;
        } else if (cur == "居民服务、修理和其他服务业") {
          service += num;
        } else if (cur == "住宿和餐饮业") {
        } else if (cur == "卫生和社会工作") {
          health += num;
        }

        sum += num;
      }
      // 按照需求排序 big_term term num
      return [];
    },
    //初始化数据
    initData() {
      this.axios({
        url: "grad/org_name",
        method: "get",
        params: {
          start: 2020,
          end: 2020,
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
        },
      })
        .then((res) => {
          let bachelor = this.count_kind(res.data.data.bachelor);
          let master = this.count_kind(res.data.data.master);
          let sum = bachelor + master;
          //  调整成输出格式
        })
        .catch((err) => {
          console.log(err);
        });
    },
    drawChart() {
      let mytextStyle = {
        // color: "#333",
        fontSize: 18,
      };
      let mylabel = {
        show: true,
        position: "right",
        offset: [30, 40],
        formatter: "{b} : {c} ({d}%)",
        textStyle: mytextStyle,
      };
      this.chartPie = echarts.init(
        document.getElementById("chart-3"),
        "macarons"
      );
      this.chartPie.setOption({
        title: {
          text: "签协议和合同就业毕业生的单位行业分布",
          x: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
          left: "center",
          top: "bottom",
          orient: "horizontal",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            center: ["50%", "50%"],
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              { value: 1548, name: "搜索引擎" },
            ],
            animationEasing: "cubicInOut",
            animationDuration: 2600,
            label: {
              emphasis: mylabel,
            },
          },
        ],
      });
    },
    resize() {
      this.myChart.resize();
    },
  },
};
</script>

<style scoped>
.chart-box {
  height: 100%;
  width: 100%;
  padding: 10px;
  margin: 0 auto;
  margin-bottom: 10px;
  margin-top: 10px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
}

.chart-box :hover {
  cursor: pointer;
}
</style>
